<!--***************使用组件方法的过程******************-->
<!--1-通过import引入组件-->
<!--2-通过component:{}注册组件-->
<!--3-通过<标签></标签>引用组件-->
<!--4-通过data(){属性名:值}初始化组件属性-->
<!--5-在method:{}中注册组件的事件调用的函数方法-->
<!--6-通过外部按钮等的事件调用修改组件属性的函数方法-->
<!--7-通过import引用外部API接口-->

<template>
  <div>
    <Card>
      <row class="search">
        <Col span="12">
          <Form ref="searchForm" :model="searchForm">
            <Select v-model="searchForm.searchKey" class="search-col">
            <Option v-for="item in columns"  :value="item.key" :key="item.key">{{ item.title }}</Option>
            </Select>
            <Input v-model="searchForm.searchValue" @on-change="handleClear()" clearable placeholder="输入关键字搜索" class="search-input"/>
            <Button @click="handleSearch()" class="search-btn" type="primary"><Icon type="search"/>&nbsp;&nbsp;搜索</Button>
          </Form>
        </Col>
        <Col span="12">
          <Steps :current="5" size = "small" class="steps">
            <Step title="客户申请"></Step>
            <Step title="过磅毛重"></Step>
            <Step title="红枣检验"></Step>
            <Step title="红枣入库"></Step>
            <Step title="过磅皮重"></Step>
            <Step title="签约结算"></Step>
          </Steps>
        </Col>
      </row>
      <!--
      <row class="steps">
        <Steps :current="4" size = "small">
          <Step title="客户申请"></Step>
          <Step title="挂单过磅"></Step>
          <Step title="红枣检验"></Step>
          <Step title="红枣入库"></Step>
          <Step title="入库结算"></Step>
        </Steps>
      </row>
      -->
      <row>
        <!--
        <Button @click="showAdd()" style="margin-left:0px;" type="primary" icon="ios-add">新增价格</Button>
        <Button @click="handleDelete()" style="margin-left:18px;" type="warning" icon="ios-trash-outline">批量删除</Button>
        <Button @click="handleRefresh()" style="margin-left:18px;" type="primary" icon="ios-refresh">刷新</Button>
        -->
        <tables ref="tables" editable searchable  search-place="top" v-model="tableData" :columns="columns" :pageTotal="pageTotal" :page="page" :border="border" :stripe="stripe" :rows="rows" :loading = "loading" @on-PageSize = "changePageSize" @on-change = "changePage"  @on-delete="handleDelete"/>
        <Button style="margin: 10px 0;" type="primary" @click="exportExcel">导出为Csv文件</Button>
      </row>
      <!--3-使用Detail组件-->
      <Detail v-if="viewAccessAll" v-bind:visible = "visible" v-bind:EntryOrderData="EntryOrderData"  @cancelCallBack="shutDetailModal" ></Detail>
      <!--3-使用Edit组件-->
      <Edit v-if="viewAccessSuper"  v-bind:edit = "edit"  v-bind:EntryOrderData="EntryOrderData" @success="editSuccess"  @cancelCallBack="shutEditModal"></Edit>
      <!--3-使用UserAdd组件
      <Add v-if="viewAccessSuper1"  v-bind:add = "add" v-bind:EntryOrderData="EntryOrderData" @success="success"  @cancelCallBack="shutAddModal"></Add>
      -->
    </Card>
  </div>
</template>


<script>
import Tables from '_c/tables'              //1-引入Tables组件
import Detail from "./orders_detail.vue"; //1-引入UserDetail组件
import Edit from "./entry_account_oper.vue";     //1-引入UserEdit组件
import Add from "./orders_add.vue";     //1-引入UserAdd组件
import { getAllEntryOrders ,getOneEntryOrder,searchEntryOrderData} from '@/api/data'
export default {
  name: 'tables_page',
  components: {//注册组件
    Tables,     //2-将引入的Tables组件进行注册
    Detail, //2-将引入的Detail组件进行注册
    Edit,   //2-将引入的Edit组件进行注册
    Add    //2-将引入的Add组件进行注册
  },
  data () {
    return {   //4-初始化组件属性值
      pageTotal: 100,
      page: 1,
      rows: 10,
      loading: false,
      border:true,
      stripe:true,
      viewAccessAll:false,
      viewAccessSuper:false,
      viewAccessSuper1:false,
      edit: true,
      visible: true,
      add:true,
      searchForm:{
          searchValue:'',
          searchKey:'CompanyName',
      },
      EntryOrderData:{
        Id:1,
        OrderNo: '60100011201901180000000568',
        ApplyTime:'2019-08-01',
        CustomerName:'阿拉尔市十一团蜜园果品农民专业合作社',
        LinkTelephone:'13150282772',
        BankName:'阿拉尔市十一团蜜园果品农民专业合作社',
        BankAccount:'852011912010101347308',
        Carrier:'',
        CarrierTelephone:'',
        VehicleNo:'',
        RoughWeightTime:'2019-10-02 15:20:00',
        RoughWeight:32720,
        SkinWeightTime:'2019-10-02 18:20:00',
        SkinWeight:12840,
        NetWeight:500,
        CheckTime:'',
        CheckTypeFst:'灰枣特级',
        CheckTypeFstId:1,
        CheckFstCount:1500,
        CheckFstPrice:4.5,
        CheckFstDlvCount:0,
        CheckFstRemCount:0,
        CheckTypeSec:'灰枣一级',
        CheckTypeSecId:2,
        CheckSecCount:1500,
        CheckSecPrice:3.5,
        CheckSecDlvCount:0,
        CheckSecRemCount:0,
        CheckTypeThd:'灰枣一级',
        CheckTypeThdId:2,
        CheckThdCount:200,
        CheckThdPrice:2.5,
        CheckThdDlvCount:0,
        CheckThdRemCount:0,
        CheckPack:'箱装',
        CheckPackId:1,
        UnitWeight:13,
        UnitPrice:5.0,
        SugarRate:0,
        ImpurityRate:0,
        WaterRate:0,
        InsectRate:0,
        LandingPlaceFstId:1,
        LandingPlaceFst:'场地1',
        LandingPlaceSecId:1,
        LandingPlaceSec:'场地1',
        LandingPlaceThdId:1,
        LandingPlaceThd:'场地1',
        AccountTime:'',
        AccountWeight:5000,
        SumMoney:93990.00,
        RealMoney:37596.0,
        Scale:0.4,
        Status:0
       
      },
      columns: [
       // { type: 'selection',width: 60,align: 'center'},
        { title: 'ID', key: 'Id',width:70,align:'center',sortable: true },
        { title: '单据号', key: 'OrderNo',width:210,align: 'center'},
        { title: '客户名称', key: 'CustomerName',width:260,align: 'center'},
        { title: '质押品1', key: 'CheckTypeFst',align: 'center'},
        { title: '品1件数', key: 'CheckFstCount' ,align: 'center'},
        
        { title: '结算金额', key: 'SumMoney' ,align: 'center'},
        { title: '贷款金额', key: 'RealMoney' ,align: 'center'},
        { title: '占比率', key: 'Scale' ,align: 'center'},
        
        
        {
          title: '操作',
          key: 'action',
          align: 'center',
          width:150,

           render: (h, params) => {
            return h("div", [
              h(  
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => { //6-通过按钮的单击事件---修改组件属性及调用相关函数方法
                      this.viewAccessAll=true;
                      this.visible = true;
                      this.entryOrderId = params.row.Id;
                      this.getEntryOrder();
                    }
                  }
                },
                "详情"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  on: {  
                    click: () => {
                      this.viewAccessSuper=true;
                      this.edit = true;
                      this.entryOrderId = params.row.Id;
                      console.log("打印行号",this.entryOrderId);
                      this.getEntryOrder();
                    }
                  }
                },
                "结算"
              )
            ]);
          }


        }
      ],
      
      tableData: [
                    {
                        Id:1,
                        OrderNo: '60100011201901180000000568',
                        CustomerName:'阿拉尔市十一团蜜园果品农民专业合作社',
                        LinkTelephone:'13150282772',
                        BankName:'阿拉尔市十一团蜜园果品农民专业合作社',
                        BankAccount:'852011912010101347308',
                        PlanType:'灰枣',
                        PlanCount:1500,
                        PlanPack:'箱装',
                        RoughWeight:32720,
                        SkinWeight:12840,
                        NetWeight:19880,
                        AccountWeight:18798,
                        CheckType:'灰枣',
                        CheckClass:'均级',
                        CheckPack:'箱装',
                        CheckCount:1446,
                        UnitWeight:13,
                        UnitPrice:5.0,
                        SumMoney:93990.00,
                        RealMoney:37596.0,
                        Rate:0.4,
                        LandingPlace:'场地1',
                    },

                    {
                        Id:2,
                        OrderNo: '60100011201901180000000568',
                        CustomerName:'阿拉尔市十一团蜜园果品农民专业合作社',
                        LinkTelephone:'13150282772',
                        BankName:'阿拉尔市十一团蜜园果品农民专业合作社',
                        BankAccount:'852011912010101347308',
                        PlanType:'灰枣',
                        PlanCount:1500,
                        PlanPack:'箱装',
                        RoughWeight:32720,
                        SkinWeight:12840,
                        NetWeight:19880,
                        AccountWeight:18798,
                        CheckType:'灰枣',
                        CheckClass:'均级',
                        CheckPack:'箱装',
                        CheckCount:1446,
                        UnitWeight:13,
                        UnitPrice:5.0,
                        SumMoney:93990.00,
                        RealMoney:37596.0,
                        Rate:0.4,
                        LandingPlace:'场地1',
                    },
                    
                    {
                        Id:3,
                        OrderNo: '60100011201901180000000568',
                        CustomerName:'阿拉尔市十一团蜜园果品农民专业合作社',
                        LinkTelephone:'13150282772',
                        BankName:'阿拉尔市十一团蜜园果品农民专业合作社',
                        BankAccount:'852011912010101347308',
                        PlanType:'灰枣',
                        PlanCount:1500,
                        PlanPack:'箱装',
                        RoughWeight:32720,
                        SkinWeight:12840,
                        NetWeight:19880,
                        AccountWeight:18798,
                        CheckType:'灰枣',
                        CheckClass:'均级',
                        CheckPack:'箱装',
                        CheckCount:1446,
                        UnitWeight:13,
                        UnitPrice:5.0,
                        SumMoney:93990.00,
                        RealMoney:37596.0,
                        Rate:0.4,
                        LandingPlace:'场地1',
                    },
                    
                    
                ]
    }
  },
  methods: {
    
    handleDelete (params) {
      console.log(params)
    },
    
    handleClear(){
     
    },
    //刷新列表
    handleRefresh(){
      this.searchForm.searchValue = ""
      this.page=1;
      const data = {
           page:this.page,
           rows:this.rows,
           searchKy:this.searchForm.searchKey,
           searchVal:this.searchForm.searchValue,
           step:6
       }
       searchEntryOrderData(data).then(res => {
        this.tableData = res.List
        this.pageTotal = res.Total
        console.log(res.data)
      });
    },

    //按条件查询用户信息
    handleSearch(){
      this.page = 1;
      const data = {
           page:this.page,
           rows:this.rows,
           searchKy:this.searchForm.searchKey,
           searchVal:this.searchForm.searchValue,
           step:6
       }
       searchEntryOrderData(data).then(res => {
        this.tableData = res.List
        this.pageTotal = res.Total
        console.log(res.data)
      });
    },

    //页码改变：按页码 + 每页行数 + 上面查询条件组合查询
    changePage(val){
      console.log("改变了页码：",val)
      this.page  = val
      const data = {
           page:this.page,
           rows:this.rows,
           searchKy:this.searchForm.searchKey,
           searchVal:this.searchForm.searchValue,
           step:6
       }
       searchEntryOrderData(data).then(res => {
        this.tableData = res.List
        
        console.log(res.data)
      });
      
    },

    //每页行数改变：按页码 + 每页行数 + 上面查询条件组合查询
    changePageSize(val){
      console.log("改变每页条数：",val)
      this.rows  = val
      const data = {
           page:this.page,
           rows:this.rows,
           searchKy:this.searchForm.searchKey,
           searchVal:this.searchForm.searchValue,
           step:6
       }
       searchEntryOrderData(data).then(res => {
        this.tableData = res.List
        
        console.log(res.data)
      });
    },

    showAdd(){ //6-通过按钮的单击事件---修改组件属性及调用相关函数方法--弹出界面
      this.viewAccessSuper1=true;
      this.add = true;
      console.log("弹出增加对话框");  
      //this.getUserEmpt();            
    },
   
    shutDetailModal(data) { //5-将modal对话框的visible属性通过on-cancel事件设置为false
      this.visible = data.mode;
    },
    shutEditModal(data) {   //5-modal对话框的visible属性通过on-cancel事件设置为false
      this.edit = data.mode;
    },
    shutAddModal(data) {   //5-modal对话框的visible属性通过on-cancel事件设置为false
      this.add = data.mode;
    },
    //添加用户信息成功
    success(data) {
      this.add = data.mode;
      const para = {
           page:this.page,
           rows:this.rows,
           step:6
      }
      getAllEntryOrders(para).then(res => {
        this.tableData = res.List
        this.pageTotal = res.Total
        console.log(res.List)
      })
    },
    //修改用户信息成功
    editSuccess(data) {
      this.edit = data.mode;
      const para = {
           page:this.page,
           rows:this.rows,
           step:6
      }
      getAllEntryOrders(para).then(res => {
        this.tableData = res.List
        this.pageTotal = res.Total
        console.log(res.List)
      })
    },

    exportExcel () {
      this.$refs.tables.exportCsv({
        filename: `table-${(new Date()).valueOf()}.csv`
      })
    },

    
    //按ID获取单个用户信息
    getEntryOrder() {
       getOneEntryOrder({
        entryOrderId: this.entryOrderId
      }).then(res => {
        this.EntryOrderData = res.EntryOrder;
        console.log("返回:",this.EntryOrderData)
      });
    },
  },

  //打开页面后自动加载方法列表
  mounted () {
    const para = {
           step:6
      }
    getAllEntryOrders(para).then(res => {
      this.tableData = res.List
      this.pageTotal = res.Total
      console.log(res.List)
    })
  }
}
</script>

<style>

.search{
    margin-bottom: 10px;
    margin-left: 0px;
}
.search-col{
    display: inline-block;
    width: 200px;
}

.search-input{
      display: inline-block;
      width: 200px;
      margin-left: 2px;
}

.search-btn{
      margin-left: 30px;
      width: 80px;
}

.steps{
  margin-top: 10px;
  width: 100%;
}


</style>
